<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>


    <link rel="stylesheet" href="../../lib/sui.min.css">
    <link rel="stylesheet" href="../../lib/sui-append.min.css">
    <link rel="stylesheet" href="../../public/iconfont/iconfont.css">
    <link rel="stylesheet" href="../../public/css/style.css">
    <link rel="stylesheet" href="css/style.css">

    <script type="application/javascript" src="../../lib/jquery.min.js"></script>
    <script type="application/javascript" src="../../lib/sui.min.js"></script>

    <script type="application/javascript" src="./js/leader.js"></script>

</head>
<body class="page_body">
<div class="header" >
    <div class="header nav-content" style="width: 100%;min-width: 1000px">
        <div class="sui-navbar navbar-inverse">
            <div class="header_navbar-inner navbar-inner">
                <ul class="header_nav sui-nav" style="width: 100%">
                    <li><a href="#"><i class="iconfont">&#xe600</i>首页</a></li>
                    <li><a href="#"><i class="iconfont">&#xe604</i>教育咨询</a></li>
                    <li><a href="#"><i class="iconfont">&#xe602</i>资源中心</a></li>
                    <li><a href="#"><i class="iconfont">&#xe601</i>应用中心</a></li>
                    <li><a href="#"><i class="iconfont">&#xe603</i>个人中心</a></li>

                    <li style="float: right;"><a style="padding-left: 5px" href="#"><i class="iconfont">&#xe606</i></a></li>
                    <li style="float: right;"><a style="padding-left: 5px" href="#"><i class="iconfont">&#xe607</i></a></li>
                    <li style="float: right;"><a style="padding-left: 5px" href="#">姚朝阳</a></li>


                </ul>

            </div>
        </div>
    </div>
    <div class="header nav-slogan"  >
        <img src="../../public/img/header.jpg" >
        <span>电子考勤系统</span>
        <img src="../../public/img/logo.png" style="    width: 50px;display: inline-block;position: absolute;top: calc(50% - 18px);left: 8%;">

    </div>
</div>

<div class="content">
    <div class="frame tabs" style="position:relative;width: 15%;margin-right: 10px">

        <div class="page_tab active"><p>当日考勤</p></div>
        <div class="page_tab"><p>考勤查询</p></div>
        <div class="page_tab"><p>时间设置</p></div>

    </div>

    <div class="frame table" style="width: 74%;vertical-align:top">
        <!--日期设置-->

        <div class="plan look">
            <p style="margin:0;padding:10px;display:inline-block;">上课时间&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp年级</p>
            <div class="choose-term" style="display:inline-block">
                <span class="sui-dropdown dropdown-bordered"><span class="dropdown-inner">
                <a role="button" data-toggle="dropdown" href="javascript:void(0);" class="dropdown-toggle" style="font-weight:700">高一 <i class="caret"></i></a>
                <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
                    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);" style="font-weight:900">高一</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" style="font-weight:900">高二</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" style="font-weight:900">高三</a></li>
                </ul></span></span>
            </div>
            <input type="button" value="编辑" id="stu_btn">
            <div style="border-bottom: 1px solid #cccccc;height:15px;"></div>
            <div style="height:15px;"></div>


            <div class="data"><p style="margin:0;padding-left:10px ;display:inline-block;">周一至周五:</p><div style="width:50px;display:inline-block;"></div></div>
            <div class="p_time">
                <div >上午<div style="width:70px;display:inline-block;"></div>08:00-11:30</div><br>
                <div>下午<div style="width:70px;display:inline-block;"></div>13:35-17:30</div><br>
                <div>晚上<div style="width:70px;display:inline-block;"></div>19:00-21:30</div>
            </div>
            <br>
            <div class="data"><p style="margin:0;padding-left:10px;display:inline-block;">周六:</p><div style="width:92px;display:inline-block;"></div></div>
            <div class="p_time">
                <div style="display:inline-block;">上午<div style="width:70px;display:inline-block;"></div>08:00-11:30</div>
            </div>

        </div>

        <div class="plan convert">

            <p style="margin:0;padding:10px;display:inline-block;">上课时间&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp年级</p>
            <div class="choose-term"style="display:inline-block">
                <span class="sui-dropdown dropdown-bordered"><span class="dropdown-inner">
                <a role="button" data-toggle="dropdown" href="javascript:void(0);" class="dropdown-toggle" style="font-weight:900">高一 <i class="caret"></i></a>
                <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
                    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);" style="font-weight:900">高一</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" style="font-weight:900">高二</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" style="font-weight:900">高三</a></li>
                </ul></span></span>
            </div>
            <input type="button" value="保存" id="s1_btn">
            <div style="border-bottom: 1px solid #cccccc;height:15px;"></div>
            <div style="height:15px;"></div>

            <div class="set_time">
                <div class="data">
                    <p style="margin:0;padding-left:10px;display:inline-block;">周一至周五:</p>
                </div>

                <div class="set_time-item">

                    <form class="sui-form"  style="display: inline-block;margin-bottom:5px;">
                        <label class="checkbox-pretty inline checked">
                            <input type="checkbox" checked="checked" class="input_checkbox"><span style="margin-right:30px;">上午</span>
                        </label>
                        <input type="text" data-toggle="timepicker"style="width:90px;text-align: center;">
                    </form> -

                    <form class="sui-form"  style="display: inline-block;">
                        <input type="text" data-toggle="timepicker"style="width:90px;text-align: center;">
                    </form>
                    <input type="button" value="删除" class="del_btn">
                </div>
                <div class="set_time-item">

                    <form class="sui-form"  style="display: inline-block;">
                        <label class="checkbox-pretty inline">
                            <input type="checkbox" checked="checked" class="input_checkbox"><span style="margin-right:30px;">中午</span>
                        </label>
                        <input type="text" data-toggle="timepicker"style="width:90px;text-align: center;">
                    </form>
                    -
                    <form class="sui-form"  style="display: inline-block;">
                        <input type="text" data-toggle="timepicker"style="width:90px;text-align: center;">
                    </form>
                    <input type="button" value="删除" class="del_btn">
                </div>
                <div class="set_time-item">

                    <form class="sui-form"  style="display: inline-block;">
                        <label class="checkbox-pretty inline">
                            <input type="checkbox" checked="checked" class="input_checkbox"><span style="margin-right:30px;">晚上</span>
                        </label>
                        <input type="text" data-toggle="timepicker"style="width:90px;text-align: center;">
                    </form>
                    -
                    <form class="sui-form"  style="display: inline-block;">
                        <input type="text" data-toggle="timepicker"style="width:90px;text-align: center;">
                    </form>
                    <input type="button" value="删除" class="del_btn">
                </div>

            </div>
            <div class="set_time">
                <div class="data">
                    <p style="margin:0;padding-left:10px;display:inline-block;">周六:</p>
                </div>

                <div class="set_time-item">
                    <form class="sui-form"  style="display: inline-block;">
                        <label class="checkbox-pretty inline checked">
                            <input type="checkbox" class="input_checkbox"><span style="margin-right:30px;">上午</span>
                        </label>
                        <input type="text" data-toggle="timepicker"style="width:90px;text-align: center;">
                    </form> -

                    <form class="sui-form"  style="display: inline-block;">
                        <input type="text" data-toggle="timepicker"style="width:90px;text-align: center;">
                    </form>
                    <input type="button" value="删除" class="del_btn">
                </div>

                <div class="set_time-item">
                    <form class="sui-form"  style="display: inline-block;margin-bottom:0;">
                        <label class="checkbox-pretty inline checked">
                            <input type="checkbox" class="input_checkbox"><span style="margin-right:30px;">下午</span>
                        </label>
                        <input type="text" data-toggle="timepicker"style="width:90px;text-align: center;">
                    </form> -

                    <form class="sui-form"  style="display: inline-block;">
                        <input type="text" data-toggle="timepicker"style="width:90px;text-align: center;">
                    </form>
                    <input type="button" value="删除" class="del_btn">
                </div>

                <div class="set_time-item">
                    <form class="sui-form"  style="display: inline-block;">
                        <label class="checkbox-pretty inline checked">
                            <input type="checkbox" class="input_checkbox"><span style="margin-right:30px;">晚上</span>
                        </label>
                        <input type="text" data-toggle="timepicker"style="width:90px;text-align: center;">
                    </form> -

                    <form class="sui-form"  style="display: inline-block;">
                        <input type="text" data-toggle="timepicker"style="width:90px;text-align: center;">
                    </form>
                    <input type="button" value="删除" class="del_btn">
                </div>

            </div>


            <div class="set_time">
                <div class="data">
                    <p style="margin:0;padding-left:10px;display:inline-block;">周日:</p>
                </div>
                <div class="set_time-item">
                    <form class="sui-form"  style="display: inline-block;">
                        <label class="checkbox-pretty inline checked">
                            <input type="checkbox" class="input_checkbox"><span style="margin-right:30px;">上午</span>
                        </label>
                        <input type="text" data-toggle="timepicker"style="width:90px;text-align: center;">
                    </form> -

                    <form class="sui-form"  style="display: inline-block;">
                        <input type="text" data-toggle="timepicker"style="width:90px;text-align: center;">
                    </form>
                    <input type="button" value="删除" class="del_btn">
                </div>
                <div class="set_time-item">
                    <form class="sui-form"  style="display: inline-block;margin-bottom:0;">
                        <label class="checkbox-pretty inline checked">
                            <input type="checkbox" class="input_checkbox"><span style="margin-right:30px;">下午</span>
                        </label>
                        <input type="text" data-toggle="timepicker"style="width:90px;text-align: center;">
                    </form> -

                    <form class="sui-form"  style="display: inline-block;">
                        <input type="text" data-toggle="timepicker"style="width:90px;text-align: center;">
                    </form>
                    <input type="button" value="删除" class="del_btn">
                </div>
                <div class="set_time-item">
                    <form class="sui-form"  style="display: inline-block;">
                        <label class="checkbox-pretty inline checked">
                            <input type="checkbox" class="input_checkbox"><span style="margin-right:30px;">晚上</span>
                        </label>
                        <input type="text" data-toggle="timepicker"style="width:90px;text-align: center;">
                    </form> -

                    <form class="sui-form"  style="display: inline-block;">
                        <input type="text" data-toggle="timepicker"style="width:90px;text-align: center;">
                    </form>
                    <input type="button" value="删除" class="del_btn">
                </div>
            </div>
        </div>
        <div class="holiday look">
            <p style="margin:0;padding:10px;display:inline-block;">节假日</p>
            <input type="button" value="编辑" id="hol_btn">
            <div style="border-bottom: 1px solid #cccccc;height:15px;"></div>
            <div style="height:15px;"></div>
            <div style="padding: 10px;">
                <div style="float:left;width:100px;">国庆节</div>
                <div style="display:inline-block;margin-left:40px;float:left;">2016-10-1<div style="width:40px;display:inline-block;"></div>至<div style="width:40px;display:inline-block;"></div>2016-10-7</div>
                <div style="clear:both;"></div>
            </div>
        </div>

        <div class="holiday convert">
            <p style="margin:0;padding:10px;display:inline-block;">节假日</p>
            <input type="button" value="保存" id="s2_btn">
            <div style="border-bottom: 1px solid #cccccc;height:15px;"></div>
            <div style="height:15px;"></div>

            <ul class="sui-tag" style="margin:10px;">
                <li>清明节</li>
                <li>端午节</li>
                <li>国庆节</li>
                <li>元旦</li>
                <li>劳动节</li>
                <li>中秋节</li>
            </ul>

            <div class="hol_lump" style="padding-left: 10px">

                <div class="hol_lump-item" >
                    <input type="text" value="国庆节" style="width:70px;height:18px;padding:2px 4px;border: 1px solid #cccccc;font-size: 12px;">

                    <form class="sui-form" id="demo8" style="margin-left: 20px;display: inline-block;">
                        <input type="text" value="2014-03-02 12:48">
                    </form>


                    至

                    <form class="sui-form" id="demo9" style="display: inline-block;">
                        <input type="text" value="2014-03-02 12:48">
                    </form>

                    <input type="button" value="删除" class="del_btn">
                </div>
                <div style="clear:both;"></div>


                <div class="add-time">
                    <i class="iconfont">&#xe60c</i>添加节假日
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    $(document).ready(function(){
        $("#stu_btn").click(function(){
            $(".plan.look").css("display","none");
            $(".plan.convert").css("display","block");
        });
    });
    $(document).ready(function(){
        $("#s1_btn").click(function(){
            $(".plan.convert").css("display","none");
            $(".plan.look").css("display","block");
        });
    });


    $(document).ready(function(){
        $("#hol_btn").click(function(){
            $(".holiday.look").css("display","none");
            $(".holiday.convert").css("display","block");
        });
    });
    $(document).ready(function(){
        $("#s2_btn").click(function(){
            $(".holiday.convert").css("display","none");
            $(".holiday.look").css("display","block");
        });
    });
    $(document).ready(function(){
        $(".del_btn").click(function(){
        });
    });

    $('#demo8 input').datepicker({
        timepicker: true,
        autoclose: false, //这里最好设置为false
    });
    $('#demo9 input').datepicker({
        timepicker: true,
        autoclose: false, //这里最好设置为false
    });
</script>
</html>